<template>
  <div class="order">
    <van-nav-bar title="确定订单" left-arrow @click-left="onClickLeft" />
    <order-address />
    <!-- 商家规则选项 -->
    <div class="order-item" v-for="(item,index) in orderList.checkedGoodsList" :key="index">
      <van-card
        :num="item.number"
        :price="item.retail_price|flootPirce"
        desc="CQ9503-100 白蓝红，36.5"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
      ></van-card>
      <van-cell-group>
        <van-cell title="配送服务" value="快递运输" label="中小件送货时间" />
        <van-panel title="退货无忧" status="商家赠送" />
        <van-field label="店铺留言" placeholder="给商家留言" input-align="right" />
      </van-cell-group>
    </div>
    <!-- 用户规则选项 -->
    <van-cell-group>
      <van-cell title="发票信息" value="个人 商品明细" />
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="youhuiIsStatus = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="youhuiIsStatus"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
      <van-cell title="礼包卡" value="无可用">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="close" style="line-height: inherit;margin-left: 5px;" />
        </template>
      </van-cell>
      <van-cell center title="匿名购买">
        <template #right-icon>
          <van-switch v-model="checked" size="24" />
        </template>
      </van-cell>
    </van-cell-group>
    <div class="pay">
      <p class="commit_money">
        <span class="commit">商家金额</span>
        <span class="pay_money">{{orderList.orderTotalPrice|price}}</span>
      </p>
      <p class="commit_money">
        <span class="commit">运费</span>
        <span class="pay_money">+0.00</span>
      </p>
      <p class="commit_money">
        <span class="commit">优惠卷</span>
        <span class="pay_money">-0.00</span>
      </p>
      <p class="price">
        <span>实付金额：</span>
        <span class="pay_money">{{orderList.orderTotalPrice|price}}</span>
      </p>
      <van-button round type="info" size="large" @click="paySubmit">在线支付</van-button>
    </div>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元"
};
import { updateChecked, orderSumibt } from "@/request/api";
import OrderAddress from "./OrderAddress";
export default {
  data() {
    return {
      //商品信息
      curAddress: {},
      orderList: [],
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      youhuiIsStatus: false,
      checked: false
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onChange(index) {
      this.youhuiIsStatus = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    paySubmit() {
      this.$router.push({
        name: "orderinfo",
        params: {
          orderTotalPrice: this.orderList.orderTotalPrice
        }
      });
    }
  },
  components: {
    OrderAddress
  },
  created() {
    if (this.$route.params.productIds === undefined) {
      this.$router.replace("/shopping");
    } else {
      let productIds = this.$route.params.productIds.join(",");
      orderSumibt({
        addressId: 0,
        couponId: 0
      }).then(resp => {
        this.orderList = resp.data;
        console.log(this.orderList);
        let { id, name, mobile: tel } = resp.data.checkedAddress;
        this.curAddress = {
          id,
          name,
          tel
        };
        this.curAddress.address =
          resp.data.checkedAddress.full_region +
          resp.data.checkedAddress.address;
        this.$store.commit("changeCurAddress", {
          obj: this.curAddress,
          url: this.$route.path
        });
      });
    }
  }
  // mounted() {
  //   this.curAddress = this.$store.state.curAddress;
  // }
};
</script>

<style lang="less" scoped>
.van-card__bottom {
  .van-card__price {
    color: #f00;
  }
}
.van-card {
  background-color: #fff;
}
.order {
  background-color: #fafafa;
}
.order-item {
  margin-bottom: 10px;
}

.van-panel__header-value {
  font-size: 12px;
}
.van-cell__value {
  font-size: 12px;
}
.pay {
  margin-top: 10px;
  background-color: #fff;
  padding: 5px 14px;
  p {
    margin: 0;
    line-height: 1.88rem;
    display: flex;
    justify-content: space-between;
    .commit {
      display: block;
      width: 45%;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
    }
    .pay_money {
      display: block;
      color: #f00;
    }
  }
  .price {
    justify-content: flex-end;
    font-weight: 700;
  }
}
.van-button {
  height: 40px;
  margin-top: 18px;
}
</style>